<template>
  <div class="dailyracm">
    <div class="bgimg" v-for="item in daymusicdata.slice(0, 1)" :key="item.id">
      <img :src="item.al.picUrl" alt="" />
    </div>
    <div class="dayTop">
      <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
      <i class="iconfont icon-a-shuxing1a2sandianshuxiang"></i>
    </div>
    <div class="date">
      <b>{{ day
      < 10 ? `0${day}` : `${day}` }}</b>
          <span>
            <i>/</i>{{ month
            < 10 ? `0${month+1}` : `${month+1}` }} </span>
    </div>
    <div class="yunx">
      <p>查看今日运势</p><i class="iconfont icon-xiayiye"></i>
    </div>
    <div class="rankList">
      <dl>
        <van-sticky :offset-top="0">
          <dt @click.stop="plAllMusic">
            <span class="iconfont icon-bofang1"></span>播放全部<i>(共{{ daymusicdata.length }}首)</i>
          </dt>
        </van-sticky>
        <dd v-for="(item, index) in daymusicdata" :key="item.id">
          <img :src="item.al.picUrl" alt="" />
          <div>
            <h4>{{ item.name }}</h4>
            <h6><i v-if="item.privilege.maxbr > 320000" class="rmicon"></i>{{ item.ar[0].name }} </h6>

          </div>
          <i class="iconfont icon-bofang2" @click.stop="plMusic(index)"></i>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { getrecommendedDaily } from "@/api/recommendedDaily";
import { mapMutations } from 'vuex';
export default {
  components: {},
  data() {
    return {
      daymusicdata: [],
      month: 0,
      day: 0,
    };
  },
  methods: {
    ...mapMutations(['updatePlayer', 'updatePlayerrListIndex']),
    plMusic(index) {
      this.updatePlayer(this.daymusicdata)
      this.updatePlayerrListIndex(index)
    },
    plAllMusic() {

      this.updatePlayer(this.daymusicdata)
      this.updatePlayerrListIndex(0)
    },

    getrecommendedDailyFun() {
      getrecommendedDaily().then((data) => {
        if (data.code == 200) {
          this.daymusicdata = data.data.dailySongs;
        }

      });
    },
  },
  created() {
    this.month = new Date().getMonth()
    this.day = new Date().getDate()
    this.getrecommendedDailyFun();
  },
};
</script>

<style lang="scss" scoped>

.dailyracm {
  .bgimg {
    width: 100%;
    // height: 220px;
    position: relative;

    &::after {
      content: " ";
      background-color: rgba(0, 0, 0, 0.25);
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .dayTop {
    top: 0;
    width: 100%;
    height: 40px;
    z-index: 1;
    position: fixed;

    display: flex;
    justify-content: space-between;
    align-items: center;

    i {
      font-size: 20px;
      color: #fff;
    }

    .icon-fanhui {
      padding: 0 10px;
    }
  }

  //日期
  .date {
    position: absolute;
    top: 160px;
    left: 20px;
    color: #fff;
    z-index: 1;

    b {
      font-weight: bold;
      font-size: 30px;
      
    }

    i {
      margin: 0 2px;
    }

    span {
      font-weight: 300px;
    }
  }

  //运势
  .yunx {
    display: flex;
    position: absolute;
    align-items: center;
    top: 190px;
    left: 20px;
    color: #fff;
    font-size: 12px;
      z-index: 1;

    i {
      margin-top: 2px;
    }
  }

  // 歌曲列表样式
  .rankList {
    background-color: #ffffff;
    margin-top: 10px;
    border-radius: 8px 8px 0px 0px;
    position: absolute;
    top: 220px;
    z-index: 1;
    dt {
      height: 36px;
      line-height: 36px;
      font-size: 17px;
      color: #2d2f2e;
      font-weight: bold;
      background-color: #ffffff;

      span {
        display: inline-block;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        font-size: 9px;
        text-align: center;
        line-height: 20px;
        margin-left: 12px;
        vertical-align: 2px;
        margin-right: 9px;
        background-color: #ff4a3c;
      }

      .icon-bofang1 {
        color: #fff;
      }

      i {
        font-size: 14px;
        color: #6b6c6c;
        vertical-align: 1px;
        font-weight: normal;
        font-style: normal;
      }
    }

    dd {
      display: flex;
      height: 53px;
      border-top: 1px solid #e3e3e3;
      align-items: center;

      img {
        width: 35px;
        height: 35px;
        margin-left: 10px;
        margin-top: 4px;
        border-radius: 4px;
      }

      span {
        height: 53px;
        width: 35px;
        line-height: 53px;
        text-align: center;
        font-size: 16px;
        color: #6b6c6c;
      }

      div {
        flex: 1;
        padding-left: 10px;

        h4 {
          height: 20px;
          line-height: 20px;
          margin-top: 10px;
          font-size: 17px;
          color: #222725;
          overflow: hidden;
        }

        h6 {
          height: 15px;
          line-height: 15px;
          font-size: 12px;
          color: #898a8a;
          display: flex;
          align-items: center;

          .rmicon {
            background: url("@/assets/img/index_icon_2x.png") no-repeat 0 0;
            background-size: 166px 97px;
            width: 12px;
            height: 8px;
            margin-right: 3px;
          }

          span {
            font-size: 12px;
            color: #898a8a;
          }
        }
      }

      i {
        color: #b3b3b3;
        font-size: 30px;
        padding-right: 10px;
      }
    }

    .active {
      font-weight: bold;
      color: #df3436;
    }
  }
}
</style>